<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>移动端游戏</title>
    <script src="js/phaser.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: #000;
            overflow: hidden;
            touch-action: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-family: 'Arial', sans-serif;
        }
        
        #gameContainer {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        #startScreen {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            z-index: 10;
            color: white;
            text-align: center;
            padding: 20px;
        }
        
        .title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        
        .instructions {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 80%;
            line-height: 1.5;
        }
        
        #startButton {
            padding: 15px 40px;
            font-size: 1.5rem;
            background: linear-gradient(to bottom, #4CAF50, #388E3C);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            margin-top: 20px;
            box-shadow: 0 6px 0 #2E7D32, 0 8px 10px rgba(0,0,0,0.3);
            transition: all 0.2s;
            font-weight: bold;
            letter-spacing: 1px;
        }
        
        #startButton:active {
            transform: translateY(4px);
            box-shadow: 0 2px 0 #2E7D32, 0 4px 6px rgba(0,0,0,0.3);
        }
        
        #game {
            width: 100%;
            height: 100%;
        }
        
        .control-hint {
            position: absolute;
            bottom: 20px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            color: rgba(255,255,255,0.7);
            font-size: 0.9rem;
            pointer-events: none;
            z-index: 5;
        }
        
        .hint-left, .hint-right {
            background: rgba(0,0,0,0.5);
            padding: 8px 15px;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <div id="startScreen">
            <h1 class="title">移动端游戏</h1>
            <p class="instructions">左下区域控制移动，右下区域控制攻击<br>支持多点触控操作</p>
            <button id="startButton">进入游戏</button>
        </div>
        <div id="game"></div>
        <!-- <div class="control-hint">
            <div class="hint-left">移动控制区</div>
            <div class="hint-right">攻击控制区</div>
        </div> -->
    </div>

    <script>
        // 检查是否在全屏状态
        function isFullscreen() {
            return !!(document.fullscreenElement || 
                     document.webkitFullscreenElement || 
                     document.mozFullScreenElement || 
                     document.msFullscreenElement);
        }
        
        // 页面加载时检查
        window.addEventListener('load', function() {
            // 如果刷新时在全屏状态，退出全屏并显示开始界面
            if (isFullscreen()) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
        });

        // 游戏配置 - 使用横屏尺寸
        function getGameConfig() {
            // 横屏时，宽度应该是屏幕的最大尺寸，高度是最小尺寸
            const isLandscape = window.innerWidth > window.innerHeight;
            const gameWidth = isLandscape ? Math.max(window.innerWidth, window.innerHeight) : Math.min(window.innerWidth, window.innerHeight);
            const gameHeight = isLandscape ? Math.min(window.innerWidth, window.innerHeight) : Math.max(window.innerWidth, window.innerHeight);
            
            return {
                type: Phaser.AUTO,
                width: gameWidth,
                height: gameHeight,
                parent: 'game',
                backgroundColor: '#2c3e50',
                scene: {
                    preload: preload,
                    create: create,
                    update: update
                },
                scale: {
                    mode: Phaser.Scale.FIT,
                    autoCenter: Phaser.Scale.CENTER_BOTH
                },
                physics: {
                    default: 'arcade',
                    arcade: {
                        gravity: { y: 0 },
                        debug: false
                    }
                },
                // 启用多点触控
                input: {
                    activePointers: 3
                }
            };
        }

        // 游戏变量
        let player;
        let moveJoystick;
        let attackJoystick;
        let attackZone;
        let isAttacking = false;
        let attackDirection = 0;
        let attackGraphics;
        let attackEffect;
        let moveDirection = { x: 0, y: 0 };
        let moveSpeed = 200;
        let attackCooldown = 0;
        let attackReady = false;
        let movePointerId = null;
        let attackPointerId = null;
        let gameScene;

        // 初始化游戏
        let game;

        function preload() {
            // 预加载资源
        }

        function create() {
            gameScene = this;
            
            console.log('游戏尺寸:', this.scale.width, this.scale.height);
            console.log('窗口尺寸:', window.innerWidth, window.innerHeight);
            
            // 创建玩家角色 - 使用游戏场景的实际尺寸
            const gameWidth = this.scale.width;
            const gameHeight = this.scale.height;
            
            player = this.add.circle(gameWidth / 2, gameHeight / 2, 25, 0x3498db);
            player.setStrokeStyle(4, 0x2980b9);
            this.physics.add.existing(player);
            player.body.setCollideWorldBounds(true);

            // 创建攻击指示器图形
            attackGraphics = this.add.graphics();
            
            // 创建移动摇杆（左下区域）- 使用游戏场景的实际尺寸
            moveJoystick = this.add.circle(100, gameHeight - 100, 50, 0x34495e, 0.7);
            moveJoystick.setStrokeStyle(3, 0x2c3e50);
            moveJoystick.setScrollFactor(0);
            
            // 创建攻击摇杆（右下区域）
            attackJoystick = this.add.circle(gameWidth - 100, gameHeight - 100, 50, 0xc0392b, 0.7);
            attackJoystick.setStrokeStyle(3, 0xa93226);
            attackJoystick.setScrollFactor(0);
            
            // 创建攻击区域指示器
            attackZone = this.add.graphics();
            
            // 设置输入
            setupInput(this);
            
            // 隐藏开始界面
            document.getElementById('startScreen').style.display = 'none';
        }

        function setupInput(scene) {
            // 移动摇杆输入 - 使用指针ID跟踪多点触控
            scene.input.on('pointerdown', function(pointer) {
                const screenWidth = scene.scale.width;
                const screenHeight = scene.scale.height;
                const leftRegion = screenWidth * 0.5;  // 左侧50%区域
                const bottomRegion = screenHeight * 0.5; // 底部50%区域
                
                if (pointer.x < leftRegion && pointer.y > bottomRegion && movePointerId === null) {
                    // 左下区域 - 移动
                    movePointerId = pointer.id;
                    moveJoystick.x = pointer.x;
                    moveJoystick.y = pointer.y;
                    moveJoystick.alpha = 0.9;
                } else if (pointer.x > screenWidth - leftRegion && pointer.y > bottomRegion && attackPointerId === null) {
                    // 右下区域 - 攻击
                    attackPointerId = pointer.id;
                    attackJoystick.x = pointer.x;
                    attackJoystick.y = pointer.y;
                    attackJoystick.alpha = 0.9;
                    isAttacking = true;
                    attackReady = true;
                }
            });
            
            scene.input.on('pointermove', function(pointer) {
                if (pointer.id === movePointerId) {
                    // 移动摇杆
                    const dx = pointer.x - moveJoystick.x;
                    const dy = pointer.y - moveJoystick.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    const maxDistance = 60;
                    
                    if (distance > maxDistance) {
                        moveDirection.x = dx / distance;
                        moveDirection.y = dy / distance;
                    } else {
                        moveDirection.x = dx / maxDistance;
                        moveDirection.y = dy / maxDistance;
                    }
                    
                    // 绘制移动方向指示器
                    attackGraphics.clear();
                    attackGraphics.lineStyle(4, 0x3498db, 0.7);
                    attackGraphics.beginPath();
                    attackGraphics.moveTo(moveJoystick.x, moveJoystick.y);
                    attackGraphics.lineTo(
                        moveJoystick.x + moveDirection.x * 40,
                        moveJoystick.y + moveDirection.y * 40
                    );
                    attackGraphics.strokePath();
                } else if (pointer.id === attackPointerId && isAttacking) {
                    // 攻击摇杆
                    const dx = pointer.x - attackJoystick.x;
                    const dy = pointer.y - attackJoystick.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    const maxDistance = 60;
                    
                    if (distance > maxDistance) {
                        attackDirection = Math.atan2(dy, dx);
                    } else {
                        attackDirection = Math.atan2(dy, dx);
                    }
                    
                    // 绘制攻击方向扇形
                    attackZone.clear();
                    attackZone.fillStyle(0xe74c3c, 0.4);
                    attackZone.slice(
                        player.x, 
                        player.y, 
                        80, 
                        attackDirection - Math.PI/6, 
                        attackDirection + Math.PI/6
                    );
                    attackZone.fillPath();
                    attackZone.lineStyle(2, 0xc0392b, 0.8);
                    attackZone.strokePath();
                }
            });
            
            scene.input.on('pointerup', function(pointer) {
                if (pointer.id === movePointerId) {
                    // 移动摇杆释放
                    movePointerId = null;
                    moveJoystick.alpha = 0.7;
                    moveDirection.x = 0;
                    moveDirection.y = 0;
                    attackGraphics.clear();
                } else if (pointer.id === attackPointerId) {
                    // 攻击摇杆释放
                    attackPointerId = null;
                    attackJoystick.alpha = 0.7;
                    isAttacking = false;
                    
                    if (attackReady && attackCooldown <= 0) {
                        // 发起攻击
                        performAttack(scene);
                        attackCooldown = 30;
                        attackReady = false;
                    }
                    
                    attackZone.clear();
                }
            });
        }

        function performAttack(scene) {
            // 创建攻击效果 - 红色剑气
            attackEffect = scene.add.graphics();
            attackEffect.fillStyle(0xe74c3c, 0.9);
            
            // 绘制剑气形状
            attackEffect.save();
            attackEffect.translateCanvas(player.x, player.y);
            attackEffect.rotateCanvas(attackDirection);
            attackEffect.fillRect(0, -15, 150, 30);
            attackEffect.restore();
            
            // 添加攻击效果动画
            scene.tweens.add({
                targets: attackEffect,
                x: player.x + Math.cos(attackDirection) * 150,
                y: player.y + Math.sin(attackDirection) * 150,
                alpha: 0,
                duration: 400,
                onComplete: function() {
                    if (attackEffect) {
                        attackEffect.destroy();
                    }
                }
            });
        }

        function update() {
            // 更新玩家移动
            if (player && player.body) {
                player.body.setVelocity(
                    moveDirection.x * moveSpeed,
                    moveDirection.y * moveSpeed
                );
            }
            
            // 更新攻击冷却
            if (attackCooldown > 0) {
                attackCooldown--;
            }
            
            // 更新攻击指示器位置
            if (isAttacking && attackReady && player) {
                attackZone.clear();
                attackZone.fillStyle(0xe74c3c, 0.4);
                attackZone.slice(
                    player.x, 
                    player.y, 
                    80, 
                    attackDirection - Math.PI/6, 
                    attackDirection + Math.PI/6
                );
                attackZone.fillPath();
                attackZone.lineStyle(2, 0xc0392b, 0.8);
                attackZone.strokePath();
            }
        }

        // 开始游戏按钮事件
        document.getElementById('startButton').addEventListener('click', function() {
            // 先进入全屏
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.msRequestFullscreen) {
                document.documentElement.msRequestFullscreen();
            }
            
            // 等待全屏后获取正确的横屏尺寸
            setTimeout(() => {
                // 使用横屏尺寸创建游戏
                const config = getGameConfig();
                game = new Phaser.Game(config);
                
                // 隐藏开始界面
                document.getElementById('startScreen').style.display = 'none';
            }, 300);
        });

        // 处理窗口大小变化
        window.addEventListener('resize', function() {
            if (game) {
                game.scale.refresh();
                
                // 重新调整摇杆位置
                if (gameScene && moveJoystick && attackJoystick) {
                    const gameWidth = game.scale.width;
                    const gameHeight = game.scale.height;
                    
                    moveJoystick.x = 100;
                    moveJoystick.y = gameHeight - 100;
                    
                    attackJoystick.x = gameWidth - 100;
                    attackJoystick.y = gameHeight - 100;
                }
            }
        });
    </script>
</body>
</html>